<html>

<head>
    <title>HTML 文档结构</title>
    <link rel="stylesheet" href="index.css" />

</head>

<body style="color: rgb(224, 64, 11);">
    <div class="main">
        <div class="row">
            <input class="input" type="text" id="inputtext" onkeyup="keyup(event)" />
            <input type="button" name="bt" value="确认1" onclick="handleClick(event)" />
            <input type="button" name="bt" id="button2" value="确认2" />
        </div>
        <div id="todogroup">
            <!----div id="todo0"><input type="checkbox" name="todocheck"/>APEX<button type="button"  onclick="deletByIndex" >删除</button> </div>
        这里面 todo项-->

        </div>
    <div id="xx" onmouseenter="enter('xx')" onmouseleave="leave('xx')">
        <span style="color: rgb(227, 17, 38);">asdsda&nbsp;&nbsp;&nbsp;dsadas</span>
    </div>

</body>
<script lang="javascript">

    var intCnt = 0;

    function init() {

        console.log("xxx");
        document.getElementById("button2").onclick = handleClick;
        console.log('xxxxxx');

    }

    function keyup(e){
        console.log(e);

        if(e.keyup == 13){
                handleClick();
        }
    }

    function handleClick(e) {

        console.log('handleClick');

        console.log(e); 

        var temp = getValue();

        //var div=document.createElement('div');
        // div.innerText=temp;
        document.getElementById("todogroup").innerHTML += "<div class='item' id='todo'" + intCnt + "'><input type='checkbox' name = 'todocheck'><div class='item-value'>" + temp + "</div><button class='item-del' type = 'button' onclick = 'deletByIndex'(" + intCnt + ")'>删除</button> </div>";
        //document.getElementById("todogroup").innerHTML="<div>"+temp+"<div>"; 
        //document.getElementById("aaaa").innerHTML="<li>"+temp+"<li>";
        // var temp=document.getElementsByName("bt");
        // console.log(e);
        document.getElementById("inputtext").value = "";
        intCnt++;
    }

    function getValue() {
        var temp = document.getElementById("inputtext");
        console.log(temp.value);

        // document.getElementsByClassName("main")[0].style = "background-color: #333333;";

        return temp.value;
    }

    function deletByIndex(index) {
        document.getElementById("todo" + index).remove();

    }

    function enter(id){
       document.getElementById(id).style='background-color:#3e3e3e'
    }


    function leave(id){
        document.getElementById(id).style='background-color:#000'

    }

    init();
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .main {
       /*background-color: rgb(138, 127, 255);*/
        /*width: 200px;*/
        /*height: 200px;*/

        padding: 8px;
        border: 1px salmon;
        border-radius: 8px;
        

    }

    .row {
        display: flex;
    }

    .item{
        display: flex;
        align-items: center;
        margin: 6px;
        padding: 3px;
    }

    .item:hover{
      background-color: #b1afaf;
      transform: scale(1.2);

    }

    .item-value{
        flex-grow: 1;
        color: rgb(0, 0, 0);

    }

    .item-del{
        color: rgb(12, 218, 241);

        background-color: tomato;

        border: 0px;

        opacity: 0;

        border-radius: 4px;
    }

    .item:hover .item-del{
        opacity: 1;
    }

    .input{
     padding: 8px;
     
     outline: none;

     border: 2px solid #b1afaf;
    }
    .input:focus{
        box-shadow: 0px 0px 10px #0c45e2;
        border: 2px solid #0c45e2;
    }
</style>

</html>